<template>
  <el-container>
    <!-- Header -->
    <el-header>
      <common-header></common-header>
    </el-header>
    <!-- Main -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>


<script>
import SearchBox from "@/components/SearchBox.vue";
import CommonAside from "@/components/CommonAside.vue";
import CommonHeader from "@/components/CommonHeader.vue";
export default {
  name: "Main",
  components: { SearchBox, CommonAside, CommonHeader },
  data() {
    return {
      menus: [
        {
          name: "课程",
          path: "/home",
        },
        {
          name: "我的",
          path: "/my",
        },
      ],
    };
  },
  methods: {
    handleClick(e) {
      // console.log(e)
      this.drawer = true;
      this.title = e.name;
    },
    login() {
      console.log("login");
      this.$router.push("/login");
    },
    handleCommand(command) {
      // this.$message("click on item " + command);
      if (command === "log_out") {
        //登出相关操作
        localStorage.removeItem("userInfo");
        this.$router.replace("/login");
      }
    },
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
    isAuth() {
      return localStorage.getItem("userInfo") !== undefined;
    },
  }, //
  mounted() {
    const { path } = this.$route;
    if (path === "/") {
      this.$router.replace("/home");
    }
  },
};
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;
  .el-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    // 这段代码没用但是不知道为什么
    // box-shadow: 0 3px 5px #ccc;
  }
  .el-main {
    width: 100%;
    height: 70%;
    background-color: #f5f5f5;
    //text-align: center;
    line-height: normal;
    padding: 0;
  }
}
.el-header,
.el-footer {
  width: 100%;
  height: 10%;
  // background-color: #b3c0d1;
  text-align: center;
  line-height: 60px;
}
</style>
